<div class="gsap"></div>

          <div class="figure"></div>

               <div class="tagline">

            GSAP 3D Parallax Demo

          </div>

  </div>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js'></script>

    overflow: hidden;

    background-color:darkgray;

    position: absolute;

    top: 0;

    left:0;

    width: 100%;

    height:100%;

     -moz-transform: perspective(1000px);

    -moz-transform-style: preserve-3d;

    -webkit-perspective: 1000px; 

}

​

#container {

    outline: 1px solid transparent;

    position: absolute;

    left:50%;

    top:50%;

    margin-left: -250px;

    margin-top: -265px;

    height: 537px;

    width: 500px;

     -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;

    transform-style: preserve-3d; 

    background: url('http://zadesigns.com/tron/background.jpg') no-repeat;

     transform: translateZ(0px);

    -moz-transform: translateZ(0px);

    -webkit-transform: translateZ(0px); 

}

​

.figure{

outline: 1px solid transparent;

width: 100%;

height: 100%;    

background: url('http://www.peanuts.com/wp-content/themes/desktop-theme-peanuts/images/characters/round/charliebrown.png') no-repeat;

position: absolute;

 transform: translateZ(120px);

-moz-transform: translateZ(120px);

-webkit-transform: translateZ(120px); 

bottom: 0px;

left: 0px;

  /* transform: scale(.8,.8); */

}

​

.gsap {

outline: 1px solid transparent;

width: 396px;

height: 128px;

background: url('http://zadesigns.com/tron/GSAP.png') no-repeat;

position: absolute;

 transform: translateZ(60px);

-moz-transform: translateZ(60px);

-webkit-transform: translateZ(60px); 

top: 30px;

left: 50%;

margin-left: -198px;

}

.tagline {

    width:500px;

outline: 1px solid transparent;

position: absolute;

 transform: translateZ(80px);

-moz-transform: translateZ(80px);

-webkit-transform: translateZ(80px); 

bottom: 0px;

left:50%;

margin-left:-280px;

padding-left: 30px;

padding-right: 30px;

background: rgba(0,0,0,0.6);

font-family: Helvetica-Neue, san-serif;

color: #FFF;

font-size: 30px;

line-height: 60px;

text-align:center;

}

    $('body').mousemove(function(event) {

        cx = Math.ceil($('body').width() / 2.0);

        cy = Math.ceil($('body').height() / 2.0);

        dx = event.pageX - cx;

        dy = event.pageY - cy;

​

        tiltx = (dy / cy);

        tilty = - (dx / cx);

        radius = Math.sqrt(Math.pow(tiltx,2) + Math.pow(tilty,2));

        degree = (radius * 20);

        TweenMax.to("#container",1, {transform:'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)'});

//        $('#picture').css('-webkit-transform','rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');

    });

});